<template>
  <!--
  登录接口调用
   1：定义接口api
   2:导入api方法
   3：在表单验证通过后调用api
   4:调用成功
      token存储到vuex,token要持久化
      提示
      跳转到首页
 -->

  <div class="login">
    <div class="box">
      <div class="logo-box">
        <img class="logo" src="@/assets/common/login-logo.png" alt="">
      </div>
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item prop="mobile">
          <el-input
            v-model="form.mobile"
            placeholder="请输入内容"
            prefix-icon="el-icon-user-solid"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="form.password"
            show-password
            placeholder="请输入内容"
            prefix-icon="el-icon-lock"
            @keyup.enter.native="submit"
          />
        </el-form-item>
        <el-form-item>
          <!--
            getData
            确定/登录  submit
            删除       delClick
            编辑       .....
            查看
            新增
           -->
          <el-button
            type="primary"
            class="btn"
            :loading="loading"
            @click="submit"
          >
            <div class="txt">登录</div>
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { sysLogin } from '@/api/login'
export default {
  data() {
    return {
      loading: false,
      form: {
        mobile: '13800000002', //	string	必须		手机号
        password: '123456' //	string	必须		密码
      },
      rules: {
        mobile: [
          { required: true, message: '必填', trigger: 'change' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '请正确输入手机号',
            trigger: 'change'
          }
        ], //	string	必须		手机号
        password: [
          { required: true, message: '必填', trigger: 'change' },
          {
            min: 6,
            max: 12,
            message: '请输入6-12位密码',
            trigger: 'change'
          }
        ] //	string	必须		密码
      }
    }
  },
  methods: {
    // 登录
    submit() {
      this.$refs.form.validate(async(result) => {
        if (result) {
          // try {
          this.loading = true
          const res = await sysLogin(this.form)
          // 存储token
          this.$store.commit('user/setToken', res.data)
          // 提示
          this.$message.success('登录成功')
          // 跳转到首页
          this.$router.push('/')
          console.log(res)
          // } catch (error) {
          //   console.log('错误:', error)
          // }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
// scoped:看得到的管得到，看不到的管不到
// vue2  vue-cli  5.x  @，~@代表src   5.x前  ~@
.login {
  background-image: url('~@/assets/common/login.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .box {
    width: 460px;
    height: 400px;
    .btn {
      width: 100%;
      height: 60px;
      background-color: #407ffe;
      .txt {
        font-size: 24px;
      }
    }
  }
  ::v-deep .el-input__inner {
    height: 58px !important;
  }
  .logo-box {
    text-align: center;
    .logo {
      padding: 15px 0;
    }
  }
  ::v-deep .el-form-item__error {
    color: #fff;
  }
}
</style>
